<template>
  <view class="container">
    <view class="wechatapp">
      <view class="header">
        <open-data class="avatar" type="userAvatarUrl"></open-data>
      </view>
    </view>
    <view class="auth-title">申请获取以下权限</view>
    <view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
    <view class="login-btn">
      <!-- 获取微信用户信息 -->
      <button
        class="button btn-normal"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumberFn"
      >
        授权登录
      </button>
    </view>
    <view class="no-login-btn">
      <button class="button btn-normal" @click="handleCancel">暂不登录</button>
    </view>
  </view>
</template>

<script>
import store from "@/store";
import { isEmpty } from "@/utils/util";
import { loginApi } from "@/api/index";

export default {
  data() {
    return {
      // 微信小程序登录凭证 (code)
      // 提交到后端，用于换取openid
      code: "",
    };
  },

  created() {
    // 获取code
    // this.getCode()
  },

  methods: {
    // 获取code
    // https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
    getCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            console.log("code", res.code);
            resolve(res.code);
          },
          fail: reject,
        });
      });
    },

    async getPhoneNumberFn(e) {
      const app = this;

      const code = await app.getCode();

      console.log("e.detail", e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        // 获取到加密数据
        const { encryptedData, iv } = e.detail;

        const { token = "" } = await loginApi({
          encryptedData,
          iv,
          code,
        });

        uni.setStorageSync("token", token);

        // 跳到首页
        uni.reLaunch({
          url: "/pages/index/index",
          success() {
            uni.showToast({
              title: "登录成功",
              icon: "success",
            });
          },
          fail() {
            uni.showToast({
              title: "登录失败",
              icon: "error",
            });
          },
        });

        // // 发送到服务器解密
        // wx.request({
        //   url: "https://your-server.com/api/getPhoneNumber",
        //   method: "POST",
        //   data: {
        //     encryptedData,
        //     iv,
        //     code: wx.getStorageSync("session_code"), // 需要先通过wx.login获取code
        //   },
        //   success(res) {
        //     console.log("获取到的手机号:", res.data.phoneNumber);
        //   },
        // });
      } else {
        console.log("用户拒绝授权");
      }
    },

    // 获取微信用户信息(新版)
    getUserProfile() {
      const app = this;
      wx.getUserProfile({
        lang: "zh_CN",
        desc: "获取用户相关信息",
        success({ userInfo }) {
          console.log("用户同意了授权");
          console.log("userInfo：", userInfo);
          // 授权成功事件
          app.onAuthSuccess(userInfo);
        },
        fail(e) {
          console.log("用户拒绝了授权", e);
        },
      });
    },

    // 授权成功事件
    // 这里分为两个逻辑:
    // 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
    // 2.如果不存在该用户, 则显示注册页面, 需填写手机号
    // 3.如果后端报错了, 则显示错误信息
    async onAuthSuccess(userInfo) {
      const app = this;
      // 提交到后端
      store
        .dispatch("LoginMpWx", {
          partyData: {
            code: await app.getCode(),
            oauth: "MP-WEIXIN",
            userInfo,
          },
          refereeId: store.getters.refereeId,
        })
        .then((result) => {
          // 一键登录成功
          app.$toast(result.message);
          // 跳转回原页面
          setTimeout(() => {
            app.onNavigateBack();
          }, 2000);
        })
        .catch((err) => {
          const resultData = err.result.data;
          // 显示错误信息
          if (isEmpty(resultData)) {
            app.$toast(err.result.message);
          }
          // 跳转回原页面
          if (resultData.isBack) {
            setTimeout(() => app.onNavigateBack(1), 2000);
          }
          // 判断还需绑定手机号
          if (resultData.isBindMobile) {
            app.onEmitSuccess(userInfo);
          }
        });
    },

    // 将oauth提交给父级
    // 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
    async onEmitSuccess(userInfo) {
      const app = this;
      app.$emit("success", {
        oauth: "MP-WEIXIN", // 第三方登录类型: MP-WEIXIN
        code: await app.getCode(), // 微信登录的code, 用于换取openid
        userInfo, // 微信用户信息
      });
    },

    /**
     * 暂不登录
     */
    handleCancel() {
      // 跳转回原页面
      this.onNavigateBack();
    },

    /**
     * 登录成功-跳转回原页面
     */
    onNavigateBack(delta = 1) {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack({
          delta: Number(delta || 1),
        });
      } else {
        this.$navTo("pages/index/index");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 60rpx;
  font-size: 32rpx;
  background: #fff;
  min-height: 100vh;
}

.wechatapp {
  padding: 80rpx 0 48rpx;
  border-bottom: 1rpx solid #e3e3e3;
  margin-bottom: 72rpx;
  text-align: center;

  .header {
    width: 190rpx;
    height: 190rpx;
    border: 4rpx solid #fff;
    margin: 0 auto 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
  }
}

.auth-title {
  color: #585858;
  font-size: 34rpx;
  margin-bottom: 40rpx;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
  font-size: 28rpx;
}

.login-btn {
  padding: 0 20rpx;

  .button {
    height: 88rpx;
    background: #04be01;
    color: #fff;
    font-size: 30rpx;
    border-radius: 999rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.no-login-btn {
  margin-top: 20rpx;
  padding: 0 20rpx;

  .button {
    height: 88rpx;
    background: #dfdfdf;
    color: #fff;
    font-size: 30rpx;
    border-radius: 999rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
